<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易众包服务平台</title>
  <!-- 引入合并后的样式文件 -->
  <link rel="stylesheet" href="css/style.css">
  <!-- 本地Font Awesome（需自行下载font-awesome.min.css到css文件夹） -->
  <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
  <!-- 导航栏 -->
  <header class="header">
    <div class="container">
      <nav class="nav">
        <a href="#" class="logo">众包<span>服务</span></a>
        <div class="nav-menu">
          <a href="#" class="active">首页</a>
          <a href="services.html">服务展示</a>
          <a href="#projects">重点推荐</a>
          <a href="#footer">关于我们</a>
        </div>
        <div class="nav-btn">
          <a href="#" class="btn btn-outline" id="loginBtn">登录</a>
          <a href="#" class="btn btn-primary" id="registerBtn">注册</a>
          <div class="mobile-menu-btn">
            <i class="fa fa-bars"></i>
          </div>
        </div>
      </nav>
    </div>
  </header>

  <!-- 英雄区域 -->
  <section class="hero">
    <div class="container">
      <h1 class="hero-title">找专业人才，做优质项目</h1>
      <p class="hero-desc">汇聚10万+专业服务商，提供设计、开发、营销等一站式服务，让你的项目快速落地</p>
      <div class="search-box">
        <input type="text" class="search-input" placeholder="搜索服务、技能或人才...">
        <select class="search-select">
          <option value="">全部分类</option>
          <option value="design">设计服务</option>
          <option value="dev">开发服务</option>
          <option value="marketing">营销推广</option>
        </select>
        <button class="btn btn-primary search-btn">搜索</button>
      </div>
    </div>
  </section>

  <!-- 服务分类 -->
  <section class="section" id="services">
    <div class="container">
      <h2 class="section-title">服务分类</h2>
      <div class="service-list">
        <div class="service-item">
          <div class="service-icon">
            <i class="fa fa-paint-brush"></i>
          </div>
          <div class="service-name">设计服务</div>
          <div class="service-count">2,500+ 项目</div>
        </div>
        <div class="service-item">
          <div class="service-icon">
            <i class="fa fa-code"></i>
          </div>
          <div class="service-name">开发服务</div>
          <div class="service-count">1,800+ 项目</div>
        </div>
        <div class="service-item">
          <div class="service-icon">
            <i class="fa fa-line-chart"></i>
          </div>
          <div class="service-name">营销推广</div>
          <div class="service-count">1,200+ 项目</div>
        </div>
        <div class="service-item">
          <div class="service-icon">
            <i class="fa fa-pencil"></i>
          </div>
          <div class="service-name">文案创作</div>
          <div class="service-count">950+ 项目</div>
        </div>
        <div class="service-item">
          <div class="service-icon">
            <i class="fa fa-video-camera"></i>
          </div>
          <div class="service-name">视频制作</div>
          <div class="service-count">780+ 项目</div>
        </div>
        <div class="service-item">
          <div class="service-icon">
            <i class="fa fa-language"></i>
          </div>
          <div class="service-name">翻译服务</div>
          <div class="service-count">650+ 项目</div>
        </div>
      </div>
      <div class="more-btn-container">
        <a href="services.html" class="btn btn-outline">查看更多</a>
      </div>
    </div>
  </section>

  <!-- 重点推荐 -->
  <section class="highlight-recommendations" id="projects">
    <div class="container">
      <h2 class="section-title">重点推荐</h2>
      <div class="recommendation-grid">
        <!-- 第一行 -->
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/0/300/300" alt="响应式企业官网建设" class="recommendation-img">
            <div class="hot-tag"><i class="fa fa-fire"></i> 热门</div>
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">响应式企业官网建设</div>
            <div class="recommendation-price">¥3,800</div>
          </div>
        </div>
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/119/300/300" alt="品牌LOGO设计套餐" class="recommendation-img">
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">品牌LOGO设计套餐</div>
            <div class="recommendation-price">¥1,200</div>
          </div>
        </div>
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/250/300/300" alt="企业宣传片制作" class="recommendation-img">
            <div class="hot-tag"><i class="fa fa-fire"></i> 热门</div>
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">企业宣传片制作</div>
            <div class="recommendation-price">¥5,600</div>
          </div>
        </div>
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/20/300/300" alt="微信小程序开发" class="recommendation-img">
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">微信小程序开发</div>
            <div class="recommendation-price">¥4,500</div>
          </div>
        </div>
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/26/300/300" alt="社交媒体营销" class="recommendation-img">
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">社交媒体营销</div>
            <div class="recommendation-price">¥2,800</div>
          </div>
        </div>
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/42/300/300" alt="产品包装设计" class="recommendation-img">
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">产品包装设计</div>
            <div class="recommendation-price">¥3,200</div>
          </div>
        </div>
        
        <!-- 第二行 -->
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/60/300/300" alt="SEO优化服务" class="recommendation-img">
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">SEO优化服务</div>
            <div class="recommendation-price">¥1,900</div>
          </div>
        </div>
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/65/300/300" alt="电商平台搭建" class="recommendation-img">
            <div class="hot-tag"><i class="fa fa-fire"></i> 热门</div>
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">电商平台搭建</div>
            <div class="recommendation-price">¥8,600</div>
          </div>
        </div>
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/76/300/300" alt="平面广告设计" class="recommendation-img">
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">平面广告设计</div>
            <div class="recommendation-price">¥980</div>
          </div>
        </div>
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/88/300/300" alt="APP开发" class="recommendation-img">
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">APP开发</div>
            <div class="recommendation-price">¥12,000</div>
          </div>
        </div>
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/96/300/300" alt="内容代运营" class="recommendation-img">
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">内容代运营</div>
            <div class="recommendation-price">¥4,500/月</div>
          </div>
        </div>
        <div class="recommendation-item">
          <div class="recommendation-img-container">
            <img src="https://picsum.photos/id/91/300/300" alt="品牌全案策划" class="recommendation-img">
          </div>
          <div class="recommendation-info">
            <div class="recommendation-name">品牌全案策划</div>
            <div class="recommendation-price">¥15,000</div>
          </div>
        </div>
      </div>
      <div class="more-btn-container">
        <button class="btn btn-outline load-more-btn">加载更多</button>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="footer" id="footer">
    <div class="container">
      <div class="footer-top">
        <div class="footer-about">
          <div class="footer-logo">众包<span>服务</span></div>
          <p class="footer-desc">连接需求与人才，打造安全、高效的服务交易平台，让每一个项目都能找到合适的解决方案。</p>
          <div style="display: flex; gap: 15px; font-size: 20px;">
            <a href="#"><i class="fa fa-weixin"></i></a>
            <a href="#"><i class="fa fa-weibo"></i></a>
            <a href="#"><i class="fa fa-qq"></i></a>
          </div>
        </div>
        <div class="footer-service">
          <h3 class="footer-title">服务分类</h3>
          <ul class="footer-list">
            <li><a href="#">设计服务</a></li>
            <li><a href="#">开发服务</a></li>
            <li><a href="#">营销推广</a></li>
            <li><a href="#">文案创作</a></li>
            <li><a href="#">视频制作</a></li>
          </ul>
        </div>
        <div class="footer-help">
          <h3 class="footer-title">帮助中心</h3>
          <ul class="footer-list">
            <li><a href="#">新手指南</a></li>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">交易规则</a></li>
            <li><a href="#">隐私政策</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        © 2024 简易众包服务平台 版权所有
      </div>
    </div>
  </footer>

  <!-- 登录模态框 -->
  <div class="modal" id="loginModal">
    <div class="modal-content">
      <div class="modal-close" id="loginClose"><i class="fa fa-times"></i></div>
      <h3 class="modal-title">用户登录</h3>
      <form>
        <div class="form-group">
          <label class="form-label">手机号</label>
          <input type="tel" class="form-input" placeholder="请输入手机号">
        </div>
        <div class="form-group">
          <label class="form-label">密码</label>
          <input type="password" class="form-input" placeholder="请输入密码">
        </div>
        <button type="button" class="btn btn-primary" style="width: 100%;">登录</button>
        <div class="form-footer">
          还没有账号？<span class="form-link" id="toRegister">立即注册</span>
        </div>
      </form>
    </div>
  </div>

  <!-- 注册模态框 -->
  <div class="modal" id="registerModal">
    <div class="modal-content">
      <div class="modal-close" id="registerClose"><i class="fa fa-times"></i></div>
      <h3 class="modal-title">用户注册</h3>
      <form>
        <div class="form-group">
          <label class="form-label">手机号</label>
          <input type="tel" class="form-input" placeholder="请输入手机号">
        </div>
        <div class="form-group form-code">
          <label class="form-label" style="display: none;">验证码</label>
          <input type="text" class="form-input" placeholder="请输入验证码">
          <button type="button" class="btn form-code-btn">获取验证码</button>
        </div>
        <div class="form-group">
          <label class="form-label">设置密码</label>
          <input type="password" class="form-input" placeholder="请设置6-16位密码">
        </div>
        <div class="form-agree">
          <input type="checkbox" id="agree">
          <label for="agree">我已阅读并同意<a href="#" class="form-link">《用户协议》</a>和<a href="#" class="form-link">《隐私政策》</a></label>
        </div>
        <button type="button" class="btn btn-primary" style="width: 100%;">注册</button>
        <div class="form-footer">
          已有账号？<span class="form-link" id="toLogin">立即登录</span>
        </div>
      </form>
    </div>
  </div>

  <!-- 引入合并后的脚本文件 -->
  <script src="js/script.js"></script>
</body>
</html>
